:root {
  --v-3: blue;
  --v-4: yellow;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: 1.6;
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
}

/* 为所有的滚动条设置样式 */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 设置滚动条轨道的背景颜色 */
}

/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background: #ccc; /* 设置滚动条滑块的背景颜色 */
  border-radius: 4px;
}

/* 当鼠标滑过滑块 */
::-webkit-scrollbar-thumb:hover {
  background: #999; /* 设置滚动条滑块的鼠标悬停背景颜色 */
}

/* flex */
.flx-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flx-justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flx-align-center {
  display: flex;
  align-items: center;
}

/* clearfix */
.clearfix::after {
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
  content: '';
}

/* 文字单行省略号 */
.sle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 文字多行省略号 */
.mle {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 文字多了自动換行 */
.break-word {
  word-break: break-all;
  word-wrap: break-word;
}
